<template>
  <div style="display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background-color: #f7f7f7;">
    <PersonalCenterSidebar />
    <div style="width: 80%; max-width: 1200px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px;">

      <div v-if="tableData.length > 0" class="order-list-container">
        <table class="order-table">
          <thead>
          <tr>
            <th>ID</th>
            <th>用户号</th>
            <th>房间类型</th>
            <th>房间状态</th>
            <th>用户名</th>
            <th>电话</th>
            <th>入住时间</th>
            <th>下单时间</th>
            <th>备注</th>
          </tr>
          </thead>
          <tbody>
          <tr
              v-for="item in tableData"
              :key="item.id"
              @click="handleRowClick(item.id)"
              :class="{ 'is-hovered': hoveredId === item.id }"
              @mouseover="hoveredId = item.id"
              @mouseleave="hoveredId = null"
          >
            <td>{{ item.id }}</td>
            <td>{{ item.userId }}</td>
            <td>{{ item.roomType }}</td>
            <td>{{ item.status }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ formatDate(item.checkinDate) }}</td>
            <td>{{ formatDate(item.orderTime) }}</td>
            <td>{{ item.remarks }}</td>
          </tr>
          </tbody>
        </table>
      </div>
      <div v-else style="margin-top: 20px; color: #666; text-align: center;">暂无数据</div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import PersonalCenterSidebar from "@/views/PersonalCenterSidebar.vue";

export default {
  name: "HotelRoom",
  components: {PersonalCenterSidebar},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      roomNameQuery: '',
      selectedIds: [],
      hoveredId: null
    };
  },
  methods: {
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      thisload();
    },
    load() {
      request.get("/user/getBookingOrderInfoPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    batchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的行'
        });
        return;
      }
      request.delete("/hotelRoom/deleteHotelRoomsByIds", {
        data: this.selectedIds
      }).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '批量删除成功'
          });
          this.load();
          this.selectedIds = [];
        } else {
          this.$message({
            type: "error",
            message: "批量删除失败"
          });
        }
      });
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    },
    handleRowClick(id) {
      // 可以添加点击行的处理逻辑，比如跳转到详情页面等
      console.log("Clicked on row with ID:", id);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`;
    }
  },
  created() {
    this.load();
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f7f7f7;
  color: #333;
}

.order-list-container {
  margin-top: 20px;
  animation: fadeIn 1s;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
}

.order-table th, .order-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  transition: background-color 0.3s;
}

.order-table th {
  background-color: #ffa500; /* 橘色 */
  color: #fff;
}

.order-table tr:hover {
  background-color: #ffcc80; /* 橘色变暗 */
  color: #333;
}

.order-table tr.is-hovered {
  background-color: #ffcc80; /* 橘色变暗 */
  color: #333;
}

.order-table tr:nth-child(even) {
  background-color: #fffbe6; /* 淡橘色 */
}

.order-table tr:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.order-table tr:last-child td {
  border-bottom: 1px solid #ddd;
}

.text-content {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 新增样式 */
h2 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
}
</style>